<template>
  <uv-popup ref="popup" round="10" :safeAreaInsetBottom="false">
    <view class="content">
      <uv-form labelPosition="top" labelWidth="80" :model="model" :rules="rules" ref="form">
        <uv-form-item label="手机号" prop="mobile" borderBottom>
          <uv-input v-model="model.mobile" border="none" placeholder="请输入手机号">
          </uv-input>
        </uv-form-item>
        <uv-form-item label="验证码" prop="mobile" borderBottom>
          <uv-input v-model="model.code" border="none" placeholder="请输入验证码">
            <template v-slot:suffix>
              <phoneCode color="#4196A2" v-model="model.code" :mobile="model.mobile"></phoneCode>
            </template>
          </uv-input>
        </uv-form-item>
        <uv-button type="primary" color="#4196A2" text="提交" customStyle="margin-top: 10px" @click="submit" :loading="loading"></uv-button>
      </uv-form>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import phoneCode from "@/components/uv/phoneCode.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

let model = ref({
  mobile: "",
  code: "",
});
let loading = ref(false);

function open() {
  instance.refs.popup.open();
}

async function submit() {
  try {
    loading.value = true;
    if (!model.value.code) return proxy.$utils.showToast("请输入验证码");
    await proxy.$apis.smsLogin(model.value);
    await counter.getUserInfo();
    proxy.$utils.showToast("绑定成功");
    counter.ycMpParams.showMobile = 0;
    instance.refs.popup.close();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

defineExpose({ open });
</script>



<style lang="scss" scoped>
.content {
  width: 70vw;
  padding: 25px;
}
</style>



